<template>
	<view class="main-continer">
		<view class="video-list">
			<div class='video-item' v-for="(item,index) in videoList" :key="index" @click="itemClick(item,false)">
				<image class="video-image" :src="item.logoPicture"></image>
				<view class="video-item-text">{{item.name}}</view>
			</div>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoList: [{
					logoPicture: "https://cdjjyl.com.cn/images/videoImg/video1.jpg",
					name: "重磅推出！乐至县陈毅故里景区首批文创产品惊艳亮相！",
					channelUrl: "https://imgcdn.lzxrmtzx.com/video1641544543415832378.mp4"
				}, {
					logoPicture: "https://cdjjyl.com.cn/images/videoImg/video2.jpg",
					name: "不忘初心方得始终学习贯彻党的十九届六中全会精神",
					channelUrl: "https://imgcdn.lzxrmtzx.com/video1641367006212215227.mp4"
				}, {
					logoPicture: "https://cdjjyl.com.cn/images/videoImg/video3.jpg",
					name: "2021即将过去 你今年的愿望实现了吗？",
					channelUrl: "https://imgcdn.lzxrmtzx.com/video1640943419941755205.mp4"
				}],
			}
		},
		mounted() {
			// this.getData()
		},
		methods: {
			itemClick(item,isLive){
				let obj={
					url:item.channelUrl,
					isLive:isLive
				}
				uni.navigateTo({
					url: `./testvideo?obj=${encodeURIComponent(JSON.stringify(obj))}`,
				})
				
			},
			getData() {
				this.$api.request.getMusic({}, (res) => {
					if (res.body.status.statusCode == '0') {
						console.log(res.body.status)
						this.videoList = res.body.data.vos
					}
				})
			},

			/**
			 * 更多直播页面
			 */
			liveMore() {

			}
		}

	}
</script>

<style lang="scss" scoped>
	.main-continer {
		width: 100vw;
		height: 100vh;
		background-color: #F8F8F8;

		.video-list {
			margin-left: 20upx;
			margin-right: 20upx;
			display: flex;
			flex-wrap: wrap;

			.video-item {
				display: flex;
				margin-top: 32upx;
				margin-right: 30upx;
				flex-direction: column;
				justify-content: center;
				text-align: center;

				.video-image {
					width: 400upx;
					height: 320upx;
					background-color: #F0F0F0;
				}

				.video-item-text {
					margin-top: 8upx;
					font-family: PingFang SC;
					font-style: normal;
					font-weight: normal;
					font-size: 24upx;
					line-height: 40upx;
					/* identical to box height */
					text-align: center;
					color: #797F81;
				}

			}

			:nth-child(3n) {
				margin-right: 0rpx;
			}
		}
	}
</style>
